<div class="container main">
  <div class="row row-cols-1 row-cols-md-3">

    <div class="col">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/liquidity' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="lightning.liquidity-ranking">Liquidity Ranking</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-capacity [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-capacity>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/lightning/nodes/rankings/connectivity' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="lightning.connectivity-ranking">Connectivity Ranking</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-top-nodes-per-channels [nodes$]="nodesRanking$" [widget]="true"></app-top-nodes-per-channels>
        </div>
      </div>
    </div>

    <div class="col">
      <div class="card">
        <div class="card-body">
          <a class="title-link" href="" [routerLink]="['/lightning/nodes/oldest' | relativeUrl]">
            <h5 class="card-title d-inline" i18n="lightning.top-channels-age">Oldest nodes</h5>
            <span>&nbsp;</span>
            <fa-icon [icon]="['fas', 'external-link-alt']" [fixedWidth]="true"
              style="vertical-align: text-top; font-size: 13px; color: var(--title-fg)"></fa-icon>
          </a>
          <app-oldest-nodes [widget]="true"></app-oldest-nodes>
        </div>
      </div>
    </div>
    
  </div>
</div>